<!--军标属性编辑面板-->
<jbproperty>
  <div class="CgsTool__title" show={opts.showHeader}>
    <!--<img class='CgsSymbolTool__titleImg' src={CGS_SDK_PATH + "assets/image/tool/marktool/marktooltitle.png"} />-->
    <span class='CgsSymbolTool__titleText'>军标属性编辑面板</span>
    <button onclick={updateAttributes}>刷新</button>
  </div>
  <div ref="content" class="CgsTool__content toolPanel">

    <!--无法用 riot 正确渲染 table 里面的循环 所以改用 div 模式 -->
    <div class="symbolEdit">

      <div class="splitRoot">
        <div class="splitItem">
          <div class="splitBtn no-user-select">
            <div class="mark"></div>
            <span>显示属性</span>
          </div>

          <div class="splitContent">
            <div class="divTable">
              <div class="tr">
                <div class="td" style="width: 85px;background-color: transparent">标号名称</div>
                <div class="td"><input type="text" disabled value={jbatts.name} class="full" /> </div>
              </div>
              <div class="tr">
                <div class="td">标号颜色</div>
                <div class="td">
                  <colorpicker ref="color" onclick={colorChange} on_val_change={ onValChange }></colorpicker>
                </div>
              </div>

              <!-- 衬线相关接口在三维下不完善，暂时屏蔽-->
              <!--
                             <div class="tr">
                                <div class="td">线型</div>
                                    <div class="td">
                                        <select ref="lineType" onchange={onSelectValChange} dtype="number" class="full">
                                            <option value="0">实线</option>
                                            <option value="1">虚线</option>
                                        </select>
                                </div>
                            </div>

                            <div class="tr">
                                <div class="td">是否显示衬线</div>
                                <div class="td"><input ref="foilLine" onchange={onSelectValChange} type="checkbox" dtype="check" /></div>
                            </div>

                            <div class="tr">
                                <div class="td">衬线宽度</div>
                                <div class="td" data-is="cgs_validator_input" ref="outLineWidth" on_val_change={ onValChange } type="number"></div>
                            </div>

                            <div class="tr">
                                <div class="td">衬线颜色</div>
                                    <div class="td">
                                        <colorpicker ref="outLineColor" on_val_change={ onValChange } default_colors={mConfigs && mConfigs.symbol.default_colors}></colorpicker>
                                    </div>
                            </div>
                            -->


              <virtual if={jbatts.type===0}>
                <div class="tr">
                  <div class="td">大小</div>
                  <div class="td">
                    <div style="width: 100%;text-align: left">
                      <div onclick={onSelectValChange} aref="size" dtype="number" val="1" class="sizeBox">小</div>
                      <div onclick={onSelectValChange} aref="size" dtype="number" val="1.5" class="sizeBox">中</div>
                      <div onclick={onSelectValChange} aref="size" dtype="number" val="2.0" class="sizeBox">大</div>
                    </div>
                  </div>
                </div>
                <div class="tr">
                  <div class="td">宽度</div>
                  <div class="td" data-is="cgs_validator_input" ref="width" on_val_change={ onValChange } type="number">
                  </div>
                </div>
                <div class="tr">
                  <div class="td">高度</div>
                  <div class="td" data-is="cgs_validator_input" ref="height" on_val_change={ onValChange }
                    type="number"></div>
                </div>
                <div class="tr">
                  <div class="td">镜像</div>
                  <div class="td">
                    <select ref="mirror" onchange={onSelectValChange} dtype="number" class="full">
                      <option value="0">无</option>
                      <option value="1">水平</option>
                      <option value="2">垂直</option>
                    </select>
                  </div>
                </div>
              </virtual>
              <div class="tr">
                <div class="td">是否填充</div>
                <div class="td"><input ref="fill" onchange={onSelectValChange} type="checkbox" dtype="check" /></div>
              </div>
              <div class="tr">
                <div class="td">填充颜色</div>
                <div class="td">
                  <colorpicker ref="fillColor" on_val_change={ onValChange } default_colors={mConfigs &&
                    mConfigs.symbol.default_colors}></colorpicker>
                </div>
              </div>

              <virtual if={jbatts.type===1}>
                <div class="tr">
                  <div class="td">渐变色</div>
                  <div class="td"><input ref="changeColor" onchange={onSelectValChange} type="checkbox" dtype="check" />
                  </div>
                </div>
                <div class="tr">
                  <div class="td">渐变色1</div>
                  <div class="td">
                    <colorpicker ref="changeColor1" on_val_change={onColorChange} default_colors={mConfigs &&
                      mConfigs.symbol.default_colors}></colorpicker>
                  </div>
                </div>
                <div class="tr">
                  <div class="td">渐变色2</div>
                  <div class="td">
                    <colorpicker ref="changeColor2" on_val_change={ onColorChange } default_colors={mConfigs &&
                      mConfigs.symbol.default_colors}></colorpicker>
                  </div>
                </div>
                <div class="tr">
                  <div class="td">渐变角度</div>
                  <div class="td" data-is="cgs_validator_input" ref="changeColorDir" on_val_change={ onValChange }
                    type="number" placeholder="0-360"></div>
                </div>
              </virtual>
            </div>
          </div>
        </div>
        <div class="splitItem">
          <div class="splitBtn no-user-select">
            <div class="mark"></div>
            <span>位置属性</span>
          </div>
          <div class="splitContent">
            <div class="divTable">
              <virtual each={geo,index in jbatts.geoData }>
                <div class="tr">
                  <div class="td" style="width: 85px;">经度:{index}&nbsp;&nbsp;&nbsp;</div>
                  <div class="td"><input ref={'geoPosLon_'+index} type="number" oninput={onGeoInput} dtype="number"
                      class="full" /></div>
                </div>

                <div class="tr">
                  <div class="td">纬度:{index}</div>
                  <div class="td"><input ref={'geoPosLat_'+index} type="number" oninput={onGeoInput} dtype="number"
                      class="full" /></div>
                </div>
              </virtual>
            </div>
          </div>
        </div>

        <div class="splitItem">
          <div class="splitBtn">
            <div class="mark"></div>
            <span>标注属性</span>
          </div>
          <div class="splitContent">
            <div class="divTable">
              <div class="tr">
                <div class="td" style="width: 85px;">标注内容</div>
                <div class="td" data-is="cgs_validator_input" ref="annoText" on_val_change={ onValChange } type="text">
                </div>
              </div>
              <div class="tr">
                <div class="td">是否显示</div>
                <div class="td"><input ref="annoVisibility" onchange={onSelectValChange} type="checkbox"
                    dtype="check" /></div>
              </div>
              <div class="tr" id="neilianwenben">
                <div class="td" style="width: 85px;">内联文本</div>
                <div class="td" data-is="cgs_validator_input" ref="inwardText" on_val_change={ onValChange }
                  type="text">
                </div>
              </div>
              <div class="tr">
                <div class="td">是否显示</div>
                <div class="td"><input ref="inwardVisibility" onchange={onSelectValChange} type="checkbox"
                    dtype="check" /></div>
              </div>
              <div class="tr">
                <div class="td">字体大小</div>
                <div class="td">
                  <div ref="annoTextSize" on_val_change={onValChange} data-is="cgs_font_size_picker"></div>
                </div>
              </div>
              <div class="tr">
                <div class="td">字体颜色</div>
                <div class="td" style="text-align: center">
                  <colorpicker ref="annoTextColor" on_val_change={ onValChange } default_colors={mConfigs &&
                    mConfigs.symbol.default_colors}></colorpicker>
                </div>
              </div>
              <div class="tr">
                <div class="td">牵引线颜色</div>
                <div class="td" style="text-align: center">
                  <colorpicker ref="annoLineColor" on_val_change={ onValChange } default_colors={mConfigs &&
                    mConfigs.symbol.default_colors}></colorpicker>
                </div>
              </div>

              <div class="tr">
                <div class="td">显示牵引线</div>
                <div class="td"><input ref="annotLineVisibility" onchange={onSelectValChange} type="checkbox"
                    dtype="check" /></div>
              </div>
            </div>
          </div>

        </div>

        <div class="splitItem" hide={customEdits.length===0}>
          <div class="splitBtn">
            <div class="mark"></div>
            <span>业务属性</span>
          </div>
          <div class="splitContent">

            <div class="divTable">
              <div class="tr" each={cedit,index in customEdits }>
                <div class="td" style="width: 85px;" title={cedit.desc}>{ cedit.label }</div>
                <div class="td" data-is="cgs_validator_input" ref={cedit.key} dref={cedit.key} on_val_change={
                  onCustomEditValChanged } validator={ cedit.validator } stype={ cedit.type }>
                </div>
              </div>
            </div>

          </div>

        </div>
      </div>

    </div>


    <script>
      var tag = this;
      //start接口绘制军标 20180830jb
      window.jmpFunctionTag = tag;
      //end
      tag.map = tag.opts.map || {};
      var gJMP = null;
      var timer = setInterval(function () {
        if (tag.map.jmpApi && tag.map.jmpApi.gJMP) {
          gJMP = tag.map.jmpApi.gJMP;
          window.clearInterval(timer);
        }
      }, 1);
      tag.mConfigs = tag.map.jmpPropertiesConfigs;
      var colorArr = [{
        r: 0,
        g: 255,
        b: 0,
        a: 1
      }, 1, {
        r: 0,
        g: 0,
        b: 255,
        a: 1
      }, 1];
      // 底层无法获取该属性，暂时存储绘制的军标的属性，用于点击时回填，nodeId为key
      var changeColor = {} //判断是否采用渐变色
      var changeColor1 = {}
      var changeColor2 = {}
      var changeColorDir = {}
      var dirColor = {
        r: 255,
        g: 0,
        b: 0,
        a: 1
      };
      tag.changeColor1 = changeColor1
      tag.changeColor2 = changeColor2
      tag.changeColorDir = changeColorDir


      tag.currentNode = null; //正在编辑的军标


      //军标属性
      tag.jbatts = {
        type: 0,
        geoData: [
          [0, 0]
        ],
      };

      tag.customEdits = []; //自定义属性编辑


      tag.defaultJbjbatts = _.cloneDeep(tag.jbatts);

      tag.onValChange = function (target, val) {
        if (!tag.currentNode) {
          return;
        }
        var node = tag.currentNode;
        var nodeId = node.getID();
        var nodeDrawAttr = tag.map.gJMP.getNodeDrawAttrib(node);
        if (target.opts.ref == "inwardText") {
          var attrib = tag.map.gJMP.getNodeDrawAttrib(tag.map.gJMP.LastNode);
          if (attrib.GetInlineTextNum() > 0) {
            var box = document.getElementById('neilianwenben');
            box.style.display = '';
            stringBuf = GBK.New(val);
            attrib.SetInlineText(0, stringBuf.ptr);
            stringBuf.free();
            var tempSym = tag.map.getSymbolByUid(tag.map.gJMP.LastNode.getID());
            node.customAttrs.inward = val;
            tempSym.inward = val;
          }
          return;
        }
        var ref = target.opts.ref;
        if (ref === 'color') {
          dirColor = val;
        }
        if (ref === 'outLineWidth') {
          nodeDrawAttr.SetOutLineWidth(val);
          return;
        }
        if (ref === 'outLineColor') {
          nodeDrawAttr.SetOutLineColor(val);
          return;
        }
        if (ref === 'changeColorDir') {
          val = Number(val) < 0 ? 0 : Number(val) > 360 ? 360 : Number(val);
          if (typeof val !== 'number' || isNaN(val)) {
            tag.refs.changeColorDir.setContent();
            changeColorDir[nodeId] = null;
            return;
          }
          tag.refs.changeColorDir.setContent(val, true);
          changeColorDir[nodeId] = val;
        }
        var attrs = {
          [ref]: val
        };

        if (ref === 'fillColor') {
          attrs.fillColorAlpha = val.a;
        }
        tag.setSymbolAttrs(attrs)
        //发布jb属性修改时间，用于在线协同标绘功能
        if (target.opts.ref == "width" || target.opts.ref == "height") {
          let size = tag.map.getSymbolByUid(node.getID()).getSize();
          if (target.opts.ref == "width") {
            size[0] = val;
          } else {
            size[1] = val;
          }
          let changeP = [{
            type: "size",
            val: size
          }];
          CgsSubPub.publish(CgsEvent.eSymbolValChange, [changeP, node.getName()]);
        } else {
          let changeP = [{
            type: target.opts.ref,
            val: val
          }];
          CgsSubPub.publish(CgsEvent.eSymbolValChange, [changeP, node.getName()]);
        }
      };

      tag.colorChange = function () {

        var attrs = {
          "color": dirColor
        };
        tag.setSymbolAttrs(attrs)
      };
      tag.onColorChange = function (target, val) {

        if (!tag.currentNode) {
          return;
        }
        var node = tag.currentNode;
        var nodeId = node.getID();
        var contentColor = {
          // 三维RGB  二维BGR
          a: val.a,
          b: val.b,
          g: val.g,
          r: val.r
        }
        var ref = target.opts.ref;
        if (tag.map.is3d()) {
          contentColor = {
            a: val.a,
            b: val.r,
            g: val.g,
            r: val.b
          }
          var temp = val.b;
          val.b = val.r;
          val.r = temp;
        }
        if (ref === 'changeColor1') {
          colorArr[0] = val;
          changeColor1[nodeId] = contentColor;

        } else if (ref === 'changeColor2') {
          colorArr[2] = val;
          changeColor2[nodeId] = contentColor;
        }
        tag.onValChange(target, colorArr);
      };

      tag.onSelectValChange = function (e) {
        if (!tag.currentNode) {
          return 0;
        }
        var node = tag.currentNode;
        var nodeDrawAttr = tag.map.gJMP.getNodeDrawAttrib(node);
        var nodeId = node.getID();

        var ref = e.target;
        var refName = $$(ref).attr('ref');
        var dtype = $$(ref).attr('dtype');
        var val = $$(ref).val();

        if (!refName) {
          refName = $$(ref).attr('aref');
          val = $$(ref).attr('val');
        }
        if (dtype === 'number') {
          val = Number(val);
        } else if (dtype === 'check') {
          val = ref.checked;
        } else if (dtype === 'color') {
          var c = tag.refs.color.cIns; //临时用
          var old = c.spectrum("get");
          c.spectrum("set", val);
          val = c.spectrum("get").toRgb();
          c.spectrum("set", old); //还回去
        }

        if (refName === 'size') {
          var w = node.defaultAttrs.width * val;
          var h = node.defaultAttrs.height * val;
          tag.refs.width.setContent(w);
          tag.refs.height.setContent(h);
          tag.setSymbolAttrs({
            width: w,
            height: h,
          })
        } else if (refName === 'changeColor') {
          changeColor[nodeId] = ref.checked;
          tag.setSymbolAttrs(refName, val);
        } else if (refName === 'lineType') {
          nodeDrawAttr.SetLineType(val)
        } else if (refName === 'foilLine') {
          nodeDrawAttr.SetFoilLine(val)
        } else {
          if (refName.indexOf('geoPosLat') >= 0) {
            val = val < -90 ? -90 : val > 90 ? 90 : val;
          } else if (refName.indexOf('geoPosLon') >= 0) {
            val = val < -180 ? -180 : val > 180 ? 180 : val;
          }
          tag.setSymbolAttrs(refName, val)
          //发布jb属性修改时间，用于在线协同标绘功能
          if (refName.indexOf("geoPos") != -1) {
            let position = tag.map.getSymbolByUid(tag.map.gJMP.LastNode.getID()).getPosition();
            let changeP = [{
              type: "position",
              val: position
            }]
            CgsSubPub.publish(CgsEvent.eSymbolValChange, [changeP, node.getName()]);
          } else {
            let changeP = [{
              type: refName,
              val: val
            }]
            CgsSubPub.publish(CgsEvent.eSymbolValChange, [changeP, node.getName()]);
          }
        }
      };


      tag.setSymbolAttrs = function (attr, val) {
        if (!tag.currentNode) {
          return 0;
        }
        var attrs = {};
        if (typeof attr === 'object') {
          attrs = attr;
        } else {
          attrs[attr] = val;
        }
        tag.map.jmpApi.setNodeAttrs(tag.currentNode, attrs);
      };



      tag.onGeoInput = _.debounce(function (e) {
        tag.onSelectValChange(e);
      }, 500);

      //确定完成某一项的编辑时会出现
      tag.onInputsDone = function (e) {
        console.log('onInputsDone,不该出现', e)
      };


      tag.updateSizeAndGeo = function (node) {
        var refs = tag.refs;
        if (node) {
          tag.currentNode = node;
          var attrs = tag.map.jmpApi.getNodeAttrs(tag.currentNode, {
            width: 0,
            height: 0,
            geoData: [],
          });
          tag.jbatts.geoData = attrs.geoData;
          try {
            tag.update(); //更新渲染一次;
          } catch (err) {

          }
          if (tag.jbatts.type === 0) {
            refs.width.value = attrs.width;
            refs.height.value = attrs.height;
          }
          for (var i = 0; i < attrs.geoData.length; i++) {
            var geo = attrs.geoData[i];
            refs['geoPosLon_' + i].value = geo[0];
            refs['geoPosLat_' + i].value = geo[1];
          }
        }
      };
      tag.updateAttributes = function (node) {
        var refs = tag.refs;
        var map = tag.map;
        if (node) {
          tag.currentNode = node;
          var nodeId = node.getID();
          var attrs = tag.map.jmpApi.getNodeAttrs(tag.currentNode);
          var nodeDrawAttrib = tag.map.gJMP.getNodeDrawAttrib(tag.currentNode);

          //attrs.foilLine = nodeDrawAttrib.GetFoilLine() ? true : false;
          //attrs.outLineWidth = nodeDrawAttrib.GetOutLineWidth();
          //attrs.lineType = nodeDrawAttrib.GetLineType();

          tag.jbatts = attrs;

          try {
            tag.update(); //更新渲染一次
          } catch (err) {
            //                    console.log(err);
          }
          refs.color.setColor(attrs.color.c16);

          if (attrs.type === 0) {
            refs.width.setContent(attrs.width, true);
            refs.height.setContent(attrs.height, true);
            refs.mirror.value = attrs.mirror;
          }

          //军标文件导入时军标面板处理
          let symbol_0 = map.allSymbols[0];
          let gjmp = map.gJMP;
          let fadeMode = gjmp.GetIsFade(node); //判断导入军标文件是否采用渐变色
          changeColor[nodeId] = (fadeMode === 1 ? true : false);

          if (fadeMode) {
            //将文件导入的军标渐变色信息置于changecolor1&2中
            if (!changeColor1.hasOwnProperty(nodeId) && symbol_0 != undefined) { //表示为军标文件导入的军标对象
              let fadeColor1 = symbol_0._jmpColorToRGBA(gjmp.GetFadeColor1(node), gjmp.GetFadeTran1(node));
              changeColor1[nodeId] = fadeColor1;
            }
            if (!changeColor2.hasOwnProperty(nodeId) && symbol_0 != undefined) {
              let fadeColor2 = symbol_0._jmpColorToRGBA(gjmp.GetFadeColor2(node), gjmp.GetFadeTran2(node));
              changeColor2[nodeId] = fadeColor2;
            }
          }

          //填充色不勾选=>渐变色必不勾选
          if (!attrs.fill) {
            changeColor[nodeId] = false;
          }

          refs.fill.checked = attrs.fill;
          attrs.fillColor && refs.fillColor.setColor(attrs.fillColor.c16);
          if (refs.changeColor && changeColor[nodeId] != undefined) {
            refs.changeColor.checked = changeColor[nodeId];
          }

          refs.changeColor1 && changeColor1[nodeId] && refs.changeColor1.setColor(changeColor1[nodeId])
          refs.changeColor2 && changeColor2[nodeId] && refs.changeColor2.setColor(changeColor2[nodeId])
          refs.changeColorDir && refs.changeColorDir.setContent(changeColorDir[nodeId])

          for (var i = 0; i < attrs.geoData.length; i++) {
            var geo = attrs.geoData[i];
            refs['geoPosLon_' + i].value = geo[0];
            refs['geoPosLat_' + i].value = geo[1];
          }

          //注记属性
          var attrib = tag.map.gJMP.getNodeDrawAttrib(tag.map.gJMP.LastNode);
          var box = document.getElementById('neilianwenben');
          if (box) {
            attrib.GetInlineTextNum() > 0 ? box.style.display = '' : box.style.display = 'none';
            attrib.GetInlineTextNum() > 0 ? box.nextElementSibling.style.display = '' : box.nextElementSibling.style
              .display = 'none';
          }
          //因为军标接口暂时获取不到内联文本，这里在军标对象中获取，后续希望改回来
          if (tag.map.gJMP.LastNode && tag.map.getSymbolByUid(tag.map.gJMP.LastNode.getID())) {
            refs.inwardText.setContent(tag.map.getSymbolByUid(tag.map.gJMP.LastNode.getID()).inward, true);
            refs.inwardVisibility.checked = true;
          } else {
            refs.inwardText.setContent(null, true);
            refs.inwardVisibility.checked = false;
          }
          refs.annoText.setContent(attrs.annoText, true);
          refs.annoVisibility.checked = attrs.annoVisibility;
          refs.annoTextColor.setColor(attrs.annoTextColor.c16);
          refs.annoTextSize.setContent(attrs.annoTextSize, true);
          refs.annoLineColor.setColor(attrs.annoLineColor.c16);
          refs.annotLineVisibility.checked = attrs.annotLineVisibility;

          //refs.foilLine.checked = attrs.foilLine;
          //refs.lineType.value = attrs.lineType;
          //attrs.outLineColor && refs.outLineColor.setColor(attrs.outLineColor.c16);
          //refs.outLineWidth.setContent(attrs.outLineWidth, true);

          //自定义属性
          _.each(tag.customEdits, function (item) {
            refs[item.key].setContent(node.customAttrs[item.key], true);
          });
        } else if (tag.currentNode) {
          tag.currentNode = null;
          tag.jbatts = tag.defaultJbjbatts;
          try {
            tag.update(); // 更新渲染一次
          } catch (err) {
            //                    console.log(err);
          }
          refs.color.setColor('white');
          refs.width.setContent();
          refs.height.setContent();
          refs.mirror.value = '0';
          refs.fill.checked = false;

          //refs.foilLine.checked = false;
          // refs.lineType.value = '0';
          //refs.outLineColor.setColor('white');
          refs.fillColor.setColor('white');
          //refs.outLineWidth.setContent();

          //注记属性
          refs.annoText.setContent();
          refs.annoVisibility.checked = false;
          refs.inwardVisibility.checked = false;
          refs.annoTextSize.setContent();
          refs.inwardText.setContent();
          tag.refs.annoTextColor.setColor('white');
          tag.refs.annoLineColor.setColor('white');
          refs.annotLineVisibility.checked = false;
          //自定义属性
          _.each(tag.customEdits, function (item) {
            refs[item.key].setContent();
          });
        }
      };

      tag.on('mount', function () {
        //实现折叠效果
        var pRoot = $$(tag.refs.content).find('.splitRoot').eq(0);
        var items = pRoot.find('.splitItem');
        items.each(function (i, item) {
          var val = $$(item);
          var btn = val.find('.splitBtn').eq(0);
          btn.addClass('active');

          var content = val.find('.splitContent').eq(0);
          btn.click(function () {
            if (btn.hasClass('active')) {
              btn.removeClass('active');
              content.css('display', 'none');
            } else {
              btn.addClass('active');
              content.css('display', 'block');
            }
          });
        });
        //实现折叠效果 end
      });

      tag.addCustomEdit = function (optsions) {
        var opts = _.merge({
          label: '属性名',
          desc: '鼠标悬停时的详细描述',
          errorTitle: '出错时的title',
          key: 'zdyshuxkey',
          type: 'text', //暂不可选,可选范围 ，text , check, list ，range
          validator: null, //验证器函数
        }, optsions);
        tag.customEdits.push(opts);
      };

      tag.onCustomEditValChanged = function (target, val) {
        if (tag.currentNode) {
          var key = target.opts.dref;
          tag.map.jmpApi.setCustomAttribute(tag.currentNode, key, val);
        }
      };
    </script>
</jbproperty>